<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Foundation 4</title>

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/foundation.css" />
  <link rel="stylesheet" href="css/foundation-icons.css" />

  <!-- If you are using the gem version, you need this only -->
  <link rel="stylesheet" href="css/app.css" />

  <script src="js/vendor/custom.modernizr.js"></script>

</head>
<body>

  <!-- body content here -->
<nav class="top-bar">
  <ul class="title-area">
    <!-- Title Area -->
    <li class="name">
      <h1><a href="#sidebar"><i class="fi-torso size-24 blur"></i> Hi User! </a></h1>
    </li>
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
  </ul>

  <section class="top-bar-section">
  
    <!-- Left Nav Section -->
    <ul class="right">
     
      <li class="divider"></li>
      <li class="has-dropdown"><a href="#">Options</a>

        <ul class="dropdown">
          <li class="has-dropdown"><a href="#">Dropdown Level 1a</a>

            <ul class="dropdown">
              <li><label>Sub-Options </label></li>
              <li><a href="#">Options 2a</a></li>
             
            </ul>
          </li>
          <li><a href="#">Options 1b</a></li>
          <li><a href="#">Options 1c</a></li>
  
          <li class="divider"></li>
          <li><a href="#">See all &rarr;</a></li>
        </ul>
      </li>
      <li class="divider"></li>
    </ul>

    
  </section>

</nav>
<section class="main">
<!--Header-->

<div class="row">
<div class="large-12 columns">
	  <h2 class="docs header"><a href="#">Welcome Back!</a></h2>
	  <hr>
</div>
</div>
<!--Content-->
<div class="row">
<!--right side-->
  <div class="large-9 push-3 columns">
	<fieldset>
    <legend>Quick Post Review.</legend>
           
              <div class="row">
			  <div class="small-4 large-4 columns"><span class="blue solid size-36">5</span> <p><strong>Total</strong></p></div>
			  <div class="small-4 large-4 columns"><span class="green solid size-36">2</span><p><strong>Approved</strong></p></div>
			  <div class="small-4 large-4 columns"><span class="yellow solid size-36">3</span><p><strong>Pending</strong></p></div>
			</div>
    </fieldset>
	<table>
  <thead>
    <tr>
      <th width="200" colspan="3" style="align:center;">Recent posts</th>
      
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet </td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
	  Sed sagittis purus scelerisque urna tempor, sed faucibus massa ultrices. 
	  Aenean at nulla aliquam odio dictum consectetur.</td>
      <td>
	  <i class="fi-pencil size-18"></i>
	  <i class="fi-x size-18"></i>
		
	  </td>
    </tr>
   
  </tbody>
</table>
  </div>
<!--left side-->  
  <div class="large-3 pull-9 columns">
    <div class="section-container accordion" data-section="accordion">
  <section class="active">
    <p class="title" data-section-title><a href="#"><i class="fi-home size-24 solid"></i> <strong> Get Started</strong></a></p>

  </section>
  <section>
    <p class="title" data-section-title><a href="#"><i class="fi-pencil size-24 solid"></i><strong> Posts</strong></a></p>
    <div class="content" data-section-content>
      <ul class="side-nav">
        <li><a class="" href="post.html">Write Post</a></li>
        <li><a class="" href="clearing.html">Categories</a></li>
        <li><a class="" href="dropdown.html">All Posts</a></li>
      </ul>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#"> <i class="fi-photo size-24 solid"></i> <strong>Gallery</strong></a></p>
    <div class="content" data-section-content>
      <ul class="side-nav">
        <li><a class="" href="abide.html">Abide</a></li>
        <li><a class="" href="clearing.html">Clearing</a></li>
        <li><a class="" href="dropdown.html">Dropdown</a></li>
      </ul>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#"> <i class="fi-comments size-24 solid"></i> <strong>Comments</strong></a></p>
    <div class="content" data-section-content>
      <ul class="side-nav">
        <li><a class="" href="abide.html">Abide</a></li>
        <li><a class="" href="clearing.html">Clearing</a></li>
        <li><a class="" href="dropdown.html">Dropdown</a></li>
      </ul>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#"> <i class="fi-widget size-24 solid"></i> <strong>Settings</strong></a></p>
    <div class="content" data-section-content>
      <ul class="side-nav">
        <li><a class="" href="abide.html">Abide</a></li>
        <li><a class="" href="clearing.html">Clearing</a></li>
        <li><a class="" href="dropdown.html">Dropdown</a></li>
      </ul>
    </div>
  </section>
  <section>
    <p class="title" data-section-title><a href="#"><i class="fi-torso size-24 solid"></i> <strong>My Profile</strong></a></p>
    <div class="content" data-section-content>
      <ul class="side-nav">
        <li><a class="" href="abide.html">Abide</a></li>
        <li><a class="" href="clearing.html">Clearing</a></li>
        <li><a class="" href="dropdown.html">Dropdown</a></li>
      </ul>
    </div>
  </section>
</div>
  </div>
</div>
</section>
 <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.alerts.js"></script>
  <script src="js/foundation/foundation.clearing.js"></script>
  <script src="js/foundation/foundation.cookie.js"></script>
  <script src="js/foundation/foundation.dropdown.js"></script>
  <script src="js/foundation/foundation.forms.js"></script>
  <script src="js/foundation/foundation.joyride.js"></script>
  <script src="js/foundation/foundation.magellan.js"></script>
  <script src="js/foundation/foundation.orbit.js"></script>
  <script src="js/foundation/foundation.placeholder.js"></script>
  <script src="js/foundation/foundation.reveal.js"></script>
  <script src="js/foundation/foundation.section.js"></script>
  <script src="js/foundation/foundation.tooltips.js"></script>
  <script src="js/foundation/foundation.topbar.js"></script>
  <script src="js/foundation/foundation.interchange.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>
</html>
